<template>
  <view class="wrap public-font" :style="colorStyle">
    <view class="success-tip">
      <view class="tip-1 text-green">
        <text class="ebao-iconfont ebao-duigou-yuan fs-50 mr-20"></text>
        预约成功
      </view>
      <view class="tip-2 text--w111-999 mt-20">
        请提前准备好归还的商品及包装，您的快递运费已支付，快递员取件时请勿修改支付方式
      </view>
      <view class="tip-3 mt-20 text-red">
        <view class="mb-10">1、物流费用支付成功，若快递员索要物流费用，只需回应“到付”即可！</view>
        <view>2、如果快递员没有按时上门取件，请及时联系，归还时间以快递员揽收时间为准</view>
      </view>
    </view>

    <view  class="address-box">
      <view class="item item-1">
        <view class="line"></view>
        <view class="l">寄</view>
        <view class="r">
          <view class="r-1 mb-10">
            {{returnDetail.sender.name}}：{{returnDetail.sender.phone}}
          </view>
          <view class="r-2">
            {{returnDetail.sender.address}}
          </view>
        </view>
      </view>
      <view class="item">
        <view class="l l-2">收</view>
        <view class="r">
          <view class="r-1">
            {{returnDetail.receiver.name}}：{{returnDetail.receiver.phone}}
          </view>
          <view class="r-2">
            {{returnDetail.receiver.address}}
          </view>
        </view>
      </view>
    </view>

    <view  class="time-box">
      <view class="item time-item">
        <view class="l">上门取件时间</view>
        <view class="r fw-bold">
          <view>{{showTime}}</view>
        </view>
      </view>
      <view class="item return-item">
        <view class="l">归还方式</view>
        <view class="r">
          <text class="fw-bold">
           {{returnDetail.logistics_name}} ￥{{returnDetail.fee}} (已支付)
          </text>
        </view>
      </view>
    </view>

    <view class="bottom-box">
      <view @click="look" class="btn-square w-full">
        查看预约进度
      </view>
    </view>
  </view>
</template>

<script>
import colors from "@/mixins/color";
import {getBackDetail} from "@/api/leaseOrder";
export default {
  mixins: [colors],
  data() {
    return {
      order_id:'',
      returnDetail:{},
      back_id:'',
      showTime:''
    }
  },
  onLoad(options){
    this.order_id = options.order_id
    this.back_id=options.back_id
    this.showTime=options.showTime
    this.getSfDetail()
  },
  methods: {
    look(){
      uni.redirectTo({
        url:`/pages/goods/lease_order_return/record?order_id=${this.order_id}`
      })
    },
    getSfDetail(){
      getBackDetail({
        back_id:this.back_id
      }).then(res=>{
        this.returnDetail=res.data
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-bottom: 300rpx;
}
.success-tip{
  padding: 30rpx;
  padding-top: 50rpx;
  background: #fff;
  .tip-1{
    font-size: 30rpx;
    display: flex;
    align-items: center;
  }
  .tip-3{
    padding: 20rpx;
    background: #f5f5f5;
  }
}
.address-box{
  background: #fff;
  padding: 30rpx;
  .item-1{
    position: relative;
    padding-bottom: 60rpx;
    .line{
      position: absolute;
      height: 100%;
      border: 1rpx dashed #333;
      left: 25rpx;
      top: 25rpx;
    }
  }
  .item{
    display: flex;
    .l{
      background: #029eff;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      margin-right: 30rpx;
      z-index: 10;
    }
    .l-2{
      background: #333333;
    }
    .r{
      flex:1;
      padding-top: 8rpx;
    }
    .btn{
      align-self: center;
      margin-left: 20rpx;
      padding-left: 10rpx;
      color: #999;
      margin-top: 20rpx;
      border-left: 1rpx solid  #ddd;
      line-height: 1;
    }
  }
}

.time-box {
  background: #fff;
  padding: 0 30rpx;
  margin-top: 20rpx;
  .item{
    padding: 36rpx 20px;
    border-bottom: 1rpx solid #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:last-child{
      border-bottom: none;
    }
    .l{
      color: #333;
    }
    .r{

    }
  }
  .time-item{
    .r{
      display: flex;
      align-items: center;
    }
  }
  .return-item{
    .r{
      position: relative;
      .tip{
        position: absolute;
        font-size: 18rpx;
        white-space: nowrap;
        right: 0;
      }
    }
  }
}

.bottom-box{
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 20rpx;
  border-top: 1rpx solid #f5f5f5;
  background: #fff;
  .btn-square{
    height: 80rpx;
  }
}
</style>